<template>
  <div>
    <h1 class="fz32 fw">支付V3测试</h1>
    <img id="img" width="250" alt="">
    <h3>挂号：{{registration.officeName}}，价格:{{registration.price}}</h3>
    <p>已等待:{{count}}秒</p>
  </div>
</template>

<script>
  import exPayTest from "@/api/wxPayTest/wxPayTest";
  export default
  {
    name:"wxPayTest",
    data()
    {
      return{
        id:"1",
        registration:{},
        count:30,
        imgsrc:""
      }
    },
    async created()
    {
      // await exPayTest.registrationDetail(this.id).then(res=>
      // {
      //   this.registration = res.data.data.rows;
      // });
      await exPayTest.wxpay(this.id).then(res=>
      {
        if(res.data.code == 200)
        {
          var url = "data:image/png;base64,";
          //获取图片直接-拼接base64
          document.getElementById("img").src = url+ res.data.data.rows;
          // this.imgsrc = res.data.data.rows;
        }
      })
    },
    methods:
    {
      intervalcallback()
      {
        var that = this;
        if (that.timer) clearInterval(that.timer);
        //每隔三秒查询
        that.timer = setInterval(this.listenerCallback, 2000);
      },

      // 1 : 用户支付成功回调监听
      listenerCallback()
      {
        var that = this;
        if(that.count<=0)
        {
          alert("支付超时");
          //刷新这个页面
          window.location.href = window.location.href;
          return;
        }
        that.count--;
        exPayTest.paySuccess(this.id).then(res=>
        {
          if(res.code == 200)
          {
            if (that.timer) clearInterval(that.timer);
            alert("支付成功!!");
          }
        })
      },
    },
    mounted()
    {
      this.intervalcallback();
    },
  }
</script>

<style>

</style>
